<template>
  <el-dialog v-model="drawer" :title="title" :append-to-body="true" width="660px" @close="close">
    <el-form size="small" :model="form" :rules="rules" ref="ruleRefForm" label-width="90px">
        <el-form-item label="促销品名称" prop="activityProduct">
            <el-input v-model="form.activityProduct" placeholder="请输入"></el-input>
        </el-form-item>
        <el-row justify="space-between">
            <el-form-item label="数量" prop="amountNum">
                <el-input-number
                    v-model="form.amountNum"
                    :min="0"
                    size="small"
                    controls-position="right"
                    style="width: 120px"
                />
            </el-form-item>
            <el-form-item label="总价" prop="price" label-width="85px">
                <el-input-number
                    v-model="form.price"
                    :min="0"
                    :step="0.01"
                    size="small"
                    controls-position="right"
                    style="width: 120px"
                />
            </el-form-item>
            <el-form-item label="单位" prop="units" label-width="85px">
                <el-input v-model="form.units" placeholder="请输入" style="width: 120px"></el-input>
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
            <el-form-item label="服务商" prop="supplierId">
                <el-select v-model="form.supplierId" placeholder="请选择" size="small" filterable style="width: 120px" @change="selSupplier">
                    <el-option
                        v-for="item in serviceList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactUserPhone" label-width="85px">
                <el-input v-model="form.contactUserPhone" placeholder="请输入" style="width: 120px"></el-input>
            </el-form-item>
            <el-form-item label="接洽人" prop="contactUserName" label-width="85px">
                <!-- <el-select v-model="form.serviceManage" placeholder="请选择" size="small" filterable style="width: 120px">
                    <el-option
                        v-for="item in activeManageList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select> -->
                <el-tag>{{ form.contactUserName }}</el-tag>
            </el-form-item>
        </el-row>
        <el-form-item prop="remark" label="描述">
            <el-input type="textarea" placeholder="请输入" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="上传附件" prop="file">
            <el-upload drag :action="action" multiple :headers="headers" :on-success="fileOnSuccess" :limit="1">
                <el-icon class="el-icon--upload"><ele-UploadFilled/></el-icon>
                <div class="el-upload__text">
                    拖拽上传或 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">*每个小于10M</div>
                </template>
            </el-upload>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Session } from '/@/utils/storage'
import api from '/@/api/commonApi'

export default {
    name: 'PromotionCreate',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        editForm: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        let { dialogDrawer, isEdit, editForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            action: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            title: '新建促销品记录',
            form: {
                activityProduct: '',
                amountNum: 0,
                price: 0,
                units: '',
                supplierId: '',
                supplierName: '',
                contactUserId: '',
                contactUserName: '',
                contactUserPhone: '',
                fileUrl: '',
                remark: ''
            },
            rules: {
                name: [{ required: true, message: '请输入促销品名称', trigger: 'blur' }]
            },
            serviceList: [],
            activeManageList: [{
                label: '赵',
                value: 1
            },{
                label: '陈',
                value: 2
            }],            
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    supplierList()
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    if(isEdit.value) {
                        state.title = '编辑促销品记录'
                        state.form = editForm.value
                    }else{
                        state.title = '新建促销品记录'
                        state.form = {
                            activityProduct: '',
                            amountNum: 0,
                            price: 0,
                            units: '',
                            supplierId: '',
                            supplierName: '',
                            contactUserId: '',
                            contactUserName: '',
                            contactUserPhone: '',
                            fileUrl: '',
                            remark: ''
                        }
                    }
                }
            }
        )
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    close()
                    if(isEdit.value){
                        api.editProduct(state.form).then(res => {
                            ElMessage.success('编辑成功')
                            context.emit('onSubmit', true)
                        })
                    }else{
                        api.createProduct(state.form).then(res => {
                            ElMessage.success('新建成功')
                            context.emit('onSubmit', true)
                        })
                    }
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        // 获取服务商列表
        const supplierList = () => {
            api.supplierAll().then(res => {
                state.serviceList = res.data
            })
        }
        // 选择服务商
        const selSupplier = val => {
            let list = JSON.parse(JSON.stringify(state.serviceList))
            const result = list.find(item => {
                return item.id == val
            })
            state.form.supplierId = result.id
            state.form.supplierName = result.name
            state.form.contactUserId = result.contactUserId
            state.form.contactUserName = result.contactUserName
            state.form.contactUserPhone = result.contactUserPhone
        }
        // 文件上传
        const fileOnSuccess = (response, uploadFiles) => {
            state.form.fileUrl = response.data.src
        }    
        

        return {
            ...toRefs(state),
            drawer,
            ruleRefForm,
            close,
            submitForm,
            cancelForm,
            supplierList,
            selSupplier,
            fileOnSuccess,
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form-item{
    align-items: start;
    flex: 1;
}
:deep(.el-upload-dragger){
    padding: 5px 10px;
}
:deep(.el-upload){
    width: 530px;
    .el-icon{
        margin-bottom: 0;
        font-size: 42px;
        line-height: 42px;
    }
}
.el-upload__tip{
    color: var(--el-color-error);
}
</style>